<template>
    <div class="main">
        <van-nav-bar left-arrow @click-left="onClickLeft">
            <template #left>
                <van-icon :name="backicon" size="20"/>
            </template>
            <template #title>
                <span class="hometitle">订单详情</span>
            </template>
        </van-nav-bar>
        

        <div class="good-info">
            <div class="good-info-title">商品详情</div>

            <div class="good-info-detail" v-for="(item,index) in Order.order_goods">
                <div class="good-info-detail-img" :style="`background:url('http://www.starrymedia.vip${item.goods.left_img}')`">
                </div>
                <div class="good-info-detail-text">
                    <p>{{item.goods.brand}} {{item.goods.english_name}}</p>
                    <p>{{item.goods.goods_name}} {{item.goods.color}}</p>
                    <div class="good-info-detail-attri">
                        <span class="good-info-detail-size">{{item.spec_key_value}}</span>
                        <span class="good-info-detail-unit">码</span>
                        <img src="../../assets/img/payblack.png" alt="">
                        <span>{{item.goods_price}} <span>X</span> {{item.goods_num}}</span>
                    </div>
                </div>
            </div>

        </div>  

        <div class="ps" @click="Jumptoagre">
            <img src="../../assets/img/i.png" alt="">
            <span>本商城支持<strong>14</strong>天无理由退货</span>
        </div>
        <div style="height:16px;"></div>


        <div class="class-template" v-if="true">
            <h4>收货地址</h4>
            <van-cell-group>
                <van-cell :title="`${Order.addr.user_name} ${Order.addr.phone}`"/>
                <van-cell :title="`${Order.addr.shi} ${Order.addr.qu} ${Order.addr.address}`"/>
            </van-cell-group>
        </div>
        

        <div class="class-template" v-if="true">
            <h4>订单详情</h4>
            <van-cell-group>
                <van-cell title="下单时间">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Order.add_time | formateDate}}</span>
                    </template>
                </van-cell>
                <van-cell title="订单编号">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Order.order_sn}}</span>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <div class="class-template" v-if="true">
            <h4>支付详情</h4>
            <van-cell-group>
                <van-cell title="支付方式" :value="Order.pay_name" />
                <van-cell title="支付时间">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Order.pay_time | formateDate}}</span>
                    </template>
                </van-cell>
                <van-cell title="商品金额">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">￥ {{Order.goods_price}}</span>
                    </template>
                </van-cell>
                <van-cell title="优惠券">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">- ￥ {{Order.discount}}</span>
                    </template>
                </van-cell>
                <van-cell title="运费">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">- ￥ 0.00</span>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        <div class="order-count">
            <p>订单金额:  <span>￥ {{Order.total_amount}}</span> </p>
        </div>

        <div class="class-template" v-if="true">
            <h4>物流信息</h4>
            <van-cell-group>
                <van-cell title="配送公司" :value="Order.log_name" />
                <van-cell title="配送单号">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Order.log_sn}}</span>
                    </template>
                </van-cell>
                <van-cell title="配送时间">
                    <template #default>
                        <span style="font-family: 'DINPro Medium';">{{Order.shipping_time | formateDate}}</span>
                    </template>
                </van-cell>
                <van-cell>
                    <template #title>
                        <span style="color:#333;">收货状态</span>
                    </template>
                    <template #default>
                        <span style="color:#333;" v-if="Order.is_yes==0">未收货</span>
                        <span style="color:#333;" v-if="Order.is_yes==1">已收货</span>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>
        
    </div>
</template>
<script>
import { _getOrderInfo} from '../../service/order'
export default {
    data(){
        return{
            backicon:require('../../assets/img/backicon.png'),
            Order:{}
        }
    },
    mounted(){
        let id=this.$route.query.oid
        this.getData(id)
    },
    filters:{
        formateDate(time){
            return moment(time*1000).format('YYYY-MM-DD HH:mm:ss')
        },
        changePhone(val){
            if(val!=undefined){
                return val.replace(/(^\d{3}|\d{4}\B)/g,"$1 ");
            }
        }
    },
    methods:{
        Jumptoagre(){
			this.$router.push({path:"/reg/UserAgreement",query:{id:3}})
		},
        onClickLeft(){
            this.$router.push("/own")
        },
        getData(id){
            let _this=this
            let uid=JSON.parse(localStorage.getItem("user")).user_id
            _getOrderInfo({
                user_id:uid,
                order_id:id
            }).then(res=>{
                console.log(res)
                if(res.errcode==1){
                    _this.Order=res.data
                }else{
                    _this.$toast(res.message)
                }
                
            })
        }
    }
}
</script>
<style lang="less" scoped>
.font-SC(){
    font-family: "PingFang SC","Microsoft YaHei";
}


.main{
    width: 100%;
    height: 100vh;
    overflow-y: auto;
    background-color: #f2f2f2;

    .hometitle{
        font-size: 18px;
        .font-SC();
        font-weight: bold;
        color: #000;
        line-height: 46px;
    }
    
    .good-info{
        width: 100%;
        height: auto;
        background-color: #fff;
        margin-top: 5px;
        padding: 15px;
        box-shadow: 1px 1px 2px rgba(204, 204, 204, .8);
    }
    .good-info-title{
        .font-SC();
        font-size: 12px;
        color: #333;
    }
    .good-info-detail-img{
        display: inline-block;
        width: 90px;
        height: 80px;
        background-position: center top !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }

    .good-info-detail-text{
        display: inline-block;
        margin-left: 24px;
        vertical-align: top;
        margin-top: 10px;
        p{
            .font-SC();
            font-size: 12px;
            color: #999;
            margin-bottom: 2px;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .good-info-detail-attri{
            font-family: "DINPro-Bold";
            font-size:12px;
            color: #999;
            .good-info-detail-size{
                margin-right: 0.421vh;
            }
            .good-info-detail-unit{
                margin-right: 3.237vh;
                .font-SC();
            }
            img{
                width: 8px;
                margin-right: 5px;
            }

        }
    }
    .ps{
        height: 19px;
        line-height: 19px;
        float: right;
        .font-SC();
        font-weight: bold;
        padding-right: 15px;
        vertical-align: middle;
        span{
            font-size: 9px;
            color: #333;
        }
        img{
            width: 12px;
            margin-right: 4px;
        }
    }
    


    .class-template{
        width: 100%;
        height: auto;
        padding: 15px;
        background-color: #fff;
        margin-top: 6px;
        h4{
            .font-SC();
            font-weight: bold;
            font-size: 15px;
            color: #333;
        }
        /deep/.van-cell{
            padding: 0;
            .font-SC();
            font-size: 12px;
            color: #999;
            line-height: 20px;
        }
        /deep/.van-cell:not(:last-child)::after{
            display: none;
        }
        /deep/.van-cell__value{
            .font-SC();
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        
    }
    .order-count{
        width: 100%;
        line-height: 50px;
        .font-SC();
        font-weight: bold;
        font-size: 15px;
        color: #333;
        padding-left: 15px;
        padding-right: 15px;
        background-color: #fff;
        border-top: 1px solid #ccc;
        p{
            margin-bottom: 0;
            span{
                float: right;
                font-family: "DINPro-Bold";
                font-size:12px;
                color: #333;
            }
        }
        
    }


    
}

</style>